<template>
  <header class="header">
    <div class="header-con">
      <h1 class="header-logo">
        <router-link to="/home">
          <img src="./img/logo.png" alt="logo" />
        </router-link>
      </h1>
      <nav class="header-nav">
        <ul>
          <li><router-link to="/home">首页</router-link></li>
          <li>
            <a href="javascript:;">商品分类</a>
            <ul>
              <li>
                <!-- <a href="javascript:;">全部系列</a> -->
                <router-link
                  :to="{
                    name: 'list',
                    params: {
                      kind: '全部系列',
                    },
                    query: {
                      type: 1,
                    },
                  }"
                >
                  全部系列
                </router-link>
              </li>
              <li v-for="item in typeList" :key="item.id">
                <router-link
                  :to="{
                    name: 'list',
                    params: {
                      kind: item.name,
                    },
                    query: {
                      typeId: item.id,
                      type: 2,
                    },
                  }"
                >
                  {{ item.name }}
                </router-link>
              </li>
            </ul>
          </li>
          <li>
            <!-- <a href="javascript:;">热销</a> -->
            <router-link
              :to="{
                name: 'list',
                params: {
                  kind: '热销推荐',
                },
                query: {
                  type: 4,
                },
              }"
            >
              热销
            </router-link>
          </li>
          <li>
            <!-- <a href="javascript:;">新品</a> -->
            <router-link
              :to="{
                name: 'list',
                params: {
                  kind: '新品推荐',
                },
                query: {
                  type: 5,
                },
              }"
            >
              新品
            </router-link>
          </li>
        </ul>
      </nav>

      <h4 class="header-car">
        <router-link to="/shoppingCart">&#xe613;</router-link>
        <span v-if="cartLen">{{ cartLen }}</span>
      </h4>

      <div class="header-user">
        <div class="header-user-logo" v-if="!isLogin">
          <div @click="openLogin">
            <p>登录</p>
          </div>

          <div class="user-logo-tan">
            <div></div>
            <div class="tan-con">
              <ul>
                <li>
                  <a href="javascript:;" @click="openLogin"
                    >立即登录<span></span
                  ></a>
                </li>
                <li>
                  首次使用？<a href="javascript:;" @click="openRegister"
                    >点我注册</a
                  >
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div class="header-user-pop" v-if="isLogin">
          <div>
            <img :src="host + info.user_portrait" alt="头像" />
          </div>

          <div class="user-pop-tan">
            <div></div>
            <div>
              <ul>
                <li>{{ info.nickname }}</li>
                <li>id：{{ info.username }}</li>
                <li>
                  <!-- <a href="javascript:;">个人信息</a> -->
                  <router-link to="/user">个人信息</router-link>
                </li>
                <li v-if="info.is_admin">
                  <a href="javascript:;">后台管理系统</a>
                </li>
                <li>
                  <router-link to="/indent">我的订单</router-link>
                </li>
                <li><a href="javascript:;" @click="quit">退出</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="header-search">
        <input type="text" v-model="keyword" />
        <button @click="toSearch">搜索</button>
      </div>
    </div>

    <!-- 蒙版弹窗 -->
    <div class="masking" v-show="masking.isShow">
      <div class="login" v-show="masking.login.isShow">
        <div class="title">
          <h4>用户登录</h4>
          <span @click="closePopup">&#xeaf2;</span>
        </div>
        <ul class="content">
          <li>
            <label>
              <span>用户名</span>
              <input type="text" v-model="masking.login.username" />
            </label>
          </li>
          <li>
            <label>
              <span>密码</span>
              <input type="password" v-model="masking.login.password" />
            </label>
          </li>
          <li>
            <p>{{ masking.login.message }}</p>
          </li>
          <li>
            <button @click="login">登录</button>
            <a href="javascript:;" @click="toRegister">点我注册</a>
          </li>
        </ul>
      </div>
      <div class="register" v-show="masking.register.isShow">
        <div class="title">
          <h4>用户注册</h4>
          <span @click="closePopup">&#xeaf2;</span>
        </div>
        <ul class="content">
          <li>
            <label>
              <span>用户名</span>
              <input type="text" v-model="masking.register.username" />
            </label>
          </li>
          <li>
            <label>
              <span>密码</span>
              <input type="password" v-model="masking.register.password" />
            </label>
          </li>
          <li>
            <label>
              <span>确认密码</span>
              <input type="password" v-model="masking.register.password2" />
            </label>
          </li>
          <li>
            <p>{{ masking.register.message }}</p>
          </li>
          <li>
            <button @click="register">注册</button>
            <a href="javascript:;" @click="toLogin">点我登录</a>
          </li>
        </ul>
      </div>
    </div>
  </header>
</template>

<script>
import config from "../../config";
import { loginApi, registerApi } from "../../api";
import { mapState } from "vuex";
export default {
  name: "Header",
  data() {
    return {
      key: true,
      host: config.host,
      masking: {
        isShow: false,
        login: {
          isShow: false,
          username: "",
          password: "",
          message: "",
        },
        register: {
          isShow: false,
          username: "",
          password: "",
          password2: "",
          message: "",
        },
      },
      keyword: "",
    };
  },
  computed: {
    isLogin() {
      return this.$store.state.user.isLogin;
    },
    ...mapState("user", ["info", "cartLen"]),
    typeList() {
      return this.$store.state.goodsType.type || [];
    },
  },
  watch: {
    isLogin(value) {
      if (value) {
        this.$store.dispatch("user/getCartLen");
        setTimeout(() => {
          this.closePopup();
          this.key = true;
        }, 500);
      }
    },
  },
  methods: {
    // 搜索页
    toSearch() {
      const reg = /[\S]+/g;
      if (!reg.test(this.keyword)) return;
      this.$router.push({
        path: "/list",
        query: {
          keyword: this.keyword,
          type: 3,
        },
      });
      this.keyword = "";
    },
    // 弹出登录窗口
    openLogin() {
      this.masking.isShow = true;
      this.masking.login.isShow = true;
    },
    // 关闭弹窗
    closePopup() {
      this.masking = {
        isShow: false,
        login: {
          isShow: false,
          username: "",
          password: "",
          message: "",
        },
        register: {
          isShow: false,
          username: "",
          password: "",
          password2: "",
          message: "",
        },
      };
    },
    // 弹出注册窗口
    openRegister() {
      this.masking.isShow = true;
      this.masking.register.isShow = true;
    },
    // 从注册窗口跳转到登录窗口
    toLogin() {
      this.masking.login.isShow = true;
      this.masking.register = {
        isShow: false,
        username: "",
        password: "",
        password2: "",
        message: "",
      };
    },
    // 从登录窗口跳转到注册窗口
    toRegister() {
      this.masking.register.isShow = true;
      this.masking.login = {
        isShow: false,
        username: "",
        password: "",
        message: "",
      };
    },
    // 发送登录请求
    login() {
      if (this.key) {
        this.key = false;
      } else {
        return;
      }
      if (
        this.masking.login.username === "" &&
        this.masking.login.password === ""
      ) {
        this.key = true;
        return (this.masking.login.message = "用户名或密码不能为空！");
      } else if (this.masking.login.username === "") {
        this.key = true;
        return (this.masking.login.message = "用户名不能为空！");
      } else if (this.masking.login.password === "") {
        this.key = true;
        return (this.masking.login.message = "密码不能为空！");
      }
      loginApi(
        (response) => {
          this.masking.login.message = this.message(response.data.message);
          if (response.data.status === 1) {
            localStorage.setItem("token", response.data.token);
            localStorage.setItem("isLogin", "true");
            this.$store.commit("user/LOGIN");
            this.$store.dispatch("user/getInfo");
            this.$store.dispatch("user/getAddressee");
          } else {
            this.key = true;
          }
        },
        (err) => {
          // 提示信息
          this.$bus.$emit("showTips", "出错了！请检查网络是否连接！");
          this.key = true;
          console.log(err);
        },
        {
          username: this.masking.login.username,
          password: this.masking.login.password,
        }
      );
    },
    // 注册请求
    register() {
      if (this.key) {
        this.key = false;
      } else {
        return;
      }
      if (
        this.masking.register.username === "" &&
        this.masking.register.password === "" &&
        this.masking.register.password2 === ""
      ) {
        this.key = true;
        return (this.masking.register.message =
          "用户名，密码和确认密码不能为空！");
      } else if (
        this.masking.register.username === "" &&
        this.masking.register.password === ""
      ) {
        this.key = true;
        return (this.masking.register.message = "用户名和密码不能为空！");
      } else if (
        this.masking.register.password === "" &&
        this.masking.register.password2 === ""
      ) {
        this.key = true;
        return (this.masking.register.message = "密码和确认密码不能为空！");
      } else if (
        this.masking.register.username === "" &&
        this.masking.register.password2 === ""
      ) {
        this.key = true;
        return (this.masking.register.message = "用户名和确认密码不能为空！");
      } else if (this.masking.register.username === "") {
        this.key = true;
        return (this.masking.register.message = "用户名不能为空！");
      } else if (this.masking.register.password === "") {
        this.key = true;
        return (this.masking.register.message = "密码不能为空！");
      } else if (this.masking.register.password2 === "") {
        this.key = true;
        return (this.masking.register.message = "确认密码不能为空！");
      } else if (
        this.masking.register.password !== this.masking.register.password2
      ) {
        this.key = true;
        return (this.masking.register.message = "密码和确认密码不一致！");
      }
      registerApi(
        (response) => {
          this.masking.register.message = this.message(response.data.message);
          if (response.data.status === 1) {
            console.log("注册成功");
          }
          this.key = true;
        },
        (err) => {
          // 错误提示
          this.$bus.$emit("showTips", "出错了！请检查网络是否连接！");
          this.key = true;
          console.log(err);
        },
        {
          username: this.masking.register.username,
          password: this.masking.register.password2,
        }
      );
    },
    // 处理登录和注册返回的message
    message(ms) {
      if (/.*password.*username.*/.test(ms)) {
        this.key = true;
        return "用户名或密码格式不正确！";
      }
      if (/.*password.*/.test(ms)) {
        this.key = true;
        return "密码格式不正确！";
      }
      if (/.*username.*/.test(ms)) {
        this.key = true;
        return "用户名格式不正确！";
      }
      return ms;
    },
    // 退出登录
    quit() {
      const isQuit = confirm("是否退出登录！");
      if (!isQuit) return;
      this.$store.commit("user/QUIT");
      this.$router.push("/home");
    },
  },
  mounted() {
    this.$store.dispatch("user/firstGetInfo");
    this.$store.dispatch("goodsType/getType");
  },
};
</script>

<style lang="stylus" scoped>
.header {
  min-width: 800px;
  height: 100px;
  background-color: #F8F8F8;

  .header-con {
    width: 80%;
    margin: 0 auto;
    min-width: 800px;
  }

  .header-logo {
    width: 110px;
    height: 100px;
    float: left;
    line-height: 100px;
    padding-left: 10px;

    img {
      vertical-align: middle;
      width: 100%;
    }
  }

  .header-nav {
    float: left;
    font-size: 16px;
    padding: 46px 0 0 26px;

    &>ul {
      list-style: none;
      display: flex;

      &>li {
        &>a {
          text-decoration: none;
          padding: 4px 6px;
          margin: 0 2px;
          color: #999;

          &:hover {
            border-bottom: 1px solid #999;
          }
        }
      }

      &>li:nth-of-type(2) {
        position: relative;

        &:hover ul {
          display: block;
        }

        ul {
          display: none;
          width: 90px;
          padding: 10px;
          border-radius: 4px;
          overflow: hidden;
          background-color: #eaeaea;
          position: absolute;
          top: 26px;
          left: -10px;
          z-index: 999;

          a {
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            text-decoration: none;
            color: #999;
          }
        }
      }
    }
  }

  .header-car {
    font-family: 'iconfont';
    float: right;
    padding: 26px 8px 0 0;
    position: relative;

    a {
      text-decoration: none;
      color: #fe4d1b;
      font-size: 36px;
    }

    span {
      position: absolute;
      top: 30px;
      right: -4px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #fe4d1b;
      text-align: center;
      line-height: 20px;
      font-size: 12px;
      color: #fff;
    }
  }

  .header-user {
    width: 40px;
    height: 40px;
    float: right;
    padding: 32px 26px 0;

    // 未登录
    .header-user-logo {
      // display: none;
      width: 40px;
      height: 40px;
      position: relative;

      &>div:first-child {
        width: 38px;
        height: 38px;
        background-color: #eaeaea;
        border: 1px solid #fe4d1b;
        border-radius: 50%;
        text-align: center;
        cursor: pointer;
        position: relative;
        cursor: pointer;
        z-index: 999;

        p {
          font-size: 16px;
          line-height: 40px;
        }
      }

      &:hover .user-logo-tan {
        display: block;
      }
    }

    .user-logo-tan {
      display: none;
      position: absolute;
      top: 30px;
      left: 0px;

      div:first-child {
        width: 40px;
        height: 40px;
        background-color: #eaeaea;
        transform: rotate(45deg);
        z-index: 0;
      }
    }

    .tan-con {
      width: 180px;
      height: 120px;
      background-color: #eaeaea;
      border-radius: 4px;
      text-align: center;
      position: absolute;
      top: 20px;
      left: -70px;

      li:first-child a {
        display: block;
        width: 100px;
        height: 30px;
        border-radius: 4px;
        text-decoration: none;
        color: #fff;
        background-color: #fe4d1b;
        line-height: 30px;
        font-size: 16px;
        margin: 24px auto;
      }
    }

    // 已经登录
    .header-user-pop {
      // display: none;
      width: 40px;
      height: 40px;
      position: relative;

      &>div:first-child {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
        cursor: pointer;
        z-index: 999;

        img {
          vertical-align: middle;
          width: 100%;
          height: 100%;
        }
      }

      &:hover .user-pop-tan {
        display: block;
      }
    }

    .user-pop-tan {
      display: none;
      position: absolute;
      top: 30px;

      &>div:first-child {
        width: 40px;
        height: 40px;
        background-color: #eaeaea;
        transform: rotate(45deg);
      }

      &>div:last-child {
        padding: 10px 0;
        width: 180px;
        border-radius: 4px;
        position: absolute;
        top: 20px;
        left: -70px;
        background-color: #eaeaea;
        z-index: 999;

        li {
          height: 36px;
          text-align: center;
          line-height: 40px;
          font-size: 16px;
          color: #212121;
        }

        a {
          color: #fe4d1b;
        }
      }
    }
  }

  .header-search {
    float: right;
    display: flex;
    padding-top: 42px;
    margin-right: 20px;

    input {
      width: 180px;
      height: 26px;
      font-size: 14px;
      padding-left: 4px;
      outline: none;
      border: none;
      background-color: #eaeaea;
    }

    button {
      width: 60px;
      height: 26px;
      border: none;
      vertical-align: middle;
      background-color: #fe4d1b;
      color: #fff;
      cursor: pointer;
    }
  }

  .masking {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;

    &>div {
      width: 500px;
      background-color: #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .title {
      position: relative;

      h4 {
        padding-top: 20px;
        font-size: 20px;
        line-height: 50px;
        text-align: center;
        color: #999;
      }

      span {
        font-family: 'iconfont';
        display: block;
        width: 30px;
        height: 30px;
        font-size: 24px;
        line-height: 30px;
        text-align: center;
        color: #fe4d1b;
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;

        &:hover {
          background-color: #fe4d1b;
          color: #fff;
        }
      }
    }

    .content {
      padding: 40px 30px;

      li {
        height: 40px;
        font-size: 14px;
        color: #999;
        overflow: hidden;

        label>span {
          padding-left: 46px;
          display: inline-block;
          width: 70px;
        }

        input {
          padding: 0 6px;
          width: 250px;
          height: 24px;
          border: 1px solid #999;
          outline: none;
        }

        p {
          font-size: 12px;
          text-align: center;
          color: #fe4d1b;
        }

        button {
          padding: 4px 20px;
          margin-left: 180px;
          background-color: #fe4d1b;
          color: #fff;
          border: none;
          font-size: 16px;
        }

        a {
          vertical-align: bottom;
          margin-left: 20px;
          font-size: 12px;
          color: #999;

          &:hover {
            color: #fe4d1b;
          }
        }
      }
    }
  }
}
</style>